<template>
  <div id="app">
    <!-- 顶部 -->
    <!-- 组件重载的原理：让组件的key属性发生变化 -->
    <!-- 路由切换的时候让路由重载 -->
    <TopBar :key="topBarKeyValue"></TopBar>
    <!-- 头部  -->
    <Header></Header>
    <!-- 路由出口  -->
    <router-view @loadTopBar="loadTopBar" />
    <!-- 底部 -->
    <Footer></Footer>
    <!-- 登录页模态框组件 -->
    <Login v-show="isShowLoginModal"></Login>
    <!-- 提示信息 -->
    <transition name="fade">
      <Toast v-show="isShowToast"></Toast>
    </transition>
  </div>
</template>

<script>
import TopBar from "./components/TopBar.vue";
import Header from "./components/Header.vue";
import Footer from "./components/Footer.vue";
import Login from "./components/Login.vue";
import Toast from "./components/Toast.vue";
import { mapState } from "vuex";
export default {
  name: "App",
  components: { TopBar, Footer, Header, Login, Toast },
  data() {
    return {
      topBarKeyValue: 1, // TobBar组件的key值
    };
  },
  watch: {
    // 监听路由
    "$route.path": {
      handler(newvalue, oldvalue) {
        // console.log("@@@@@@@", newvalue, oldvalue);
        // 两个值不相等，说明切换了，就可以让 topBarKeyValue 发生变化，即组件就重载了。
        if (newvalue !== oldvalue) {
          this.topBarKeyValue++;
        }
      },
    },
  },
  computed: {
    // 登录模态框展示
    // 第一个参数是命名空间，如果不写就默认映射根目录的state
    // 第二个参数可以写成数组或者对象的形式。
    // 1. 数组写法
    // ...mapState("showLoginModal", ["isShowLoginModal"]),
    // 2. 对象写法 写成对象形式，上面就需要用show来控制显示和隐藏
    ...mapState("showLoginModal", {
      isShowLoginModal: "isShowLoginModal",
    }),
    // 3. 函数写法,第一种(不带命名空间)
    // ...mapState({
    //   isShowLoginModal: (state) => state.showLoginModal.isShowLoginModal,
    // }),
    // 3. 函数写法，第二种（带命名空间）
    // ...mapState("showLoginModal", {
    //   isShowLoginModal: (state) => state.isShowLoginModal,
    // }),

    // 展示提示框
    ...mapState({
      isShowToast: (state) => state.showToast.isShowToast,
    }),
  },
  methods: {
    // 让 TopBar 组件重载
    loadTopBar() {
      this.topBarKeyValue++;
    },
  },
};
</script>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s;
}
.fade-enter-to,
.fade-leave {
  opacity: 1;
}
</style>
